<template>
    <div class="content-bg">
      <page-header v-if="$route.meta.global_header"/>
      <div class="content white-bg container" style="min-height: 500px;">
        <table class="layui-table">

          <thead>
          <tr>
            <th>昵称</th>
            <th>加入时间</th>
            <th>签名</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>贤心</td>
            <td>2016-11-29</td>
            <td>人生就像是一场修行</td>
          </tr>
          <tr>
            <td>许闲心</td>
            <td>2016-11-28</td>
            <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
          </tr>
          </tbody>
        </table>
        <br>
        方法渲染
        <table id="demo" lay-filter="test"></table>
        自动渲染
        <table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', page:true, id:'test'}" lay-filter="test">
          <thead>
          <tr>
            <th lay-data="{field:'id', width:80, sort: true}">ID</th>
            <th lay-data="{field:'username', width:80}">用户名</th>
            <th lay-data="{field:'sex', width:80, sort: true}">性别</th>
            <th lay-data="{field:'city'}">城市</th>
            <th lay-data="{field:'sign'}">签名</th>
            <th lay-data="{field:'experience', sort: true}">积分</th>
            <th lay-data="{field:'score', sort: true}">评分</th>
            <th lay-data="{field:'classify'}">职业</th>
            <th lay-data="{field:'wealth', sort: true}">财富</th>
          </tr>
          </thead>
        </table>
        <button class="layui-btn layui-btn-sm layui-btn-normal">一个标准的按钮</button>

        <form class="layui-form" action="">
          <div class="layui-form-item">
            <label class="layui-form-label">输入框</label>
            <div class="layui-input-block">
              <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">密码框</label>
            <div class="layui-input-inline">
              <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">辅助文字</div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">选择框</label>
            <div class="layui-input-block">
              <select name="city" lay-verify="required">
                <option value=""></option>
                <option value="0">北京</option>
                <option value="1">上海</option>
                <option value="2">广州</option>
                <option value="3">深圳</option>
                <option value="4">杭州</option>
              </select>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block">
              <input type="checkbox" name="like[write]" title="写作">
              <input type="checkbox" name="like[read]" title="阅读" checked>
              <input type="checkbox" name="like[dai]" title="发呆">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">开关</label>
            <div class="layui-input-block">
              <input type="checkbox" name="switch" lay-skin="switch">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
              <input type="radio" name="sex" value="男" title="男">
              <input type="radio" name="sex" value="女" title="女" checked>
            </div>
          </div>
          <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文本域</label>
            <div class="layui-input-block">
              <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-input-block">
              <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
              <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
          </div>
        </form>
      </div>
      <page-footer v-if="$route.meta.global_footer"/>
    </div>
</template>

<script>
  import pageHeader from "./common/Header.vue"
  import PageFooter from './common/Footer.vue'
  //模块加载
  layui.use('table',function(){
    var table=layui.table;

//    第一个实例
    table.render({
      elem:'#demo',
      height:315,
      url:'/demo/table/user/',
      page: true,
      cols: [[ //表头
        {field: 'id', title: 'ID', width:80, sort: true, fixed: 'center'}
        ,{field: 'username', title: '用户名', width:80}
        ,{field: 'sex', title: '性别', width:80, sort: true}
        ,{field: 'city', title: '城市', width:80}
        ,{field: 'sign', title: '签名', width: 177}
        ,{field: 'experience', title: '积分', width: 80, sort: true}
        ,{field: 'score', title: '评分', width: 80, sort: true}
        ,{field: 'classify', title: '职业', width: 80}
        ,{field: 'wealth', title: '财富', width: 135, sort: true}
      ]]
    });
  });
    export default {
        name: 'sample',
        data() {
            return {}
        },
        methods: {},
        computed: {},
        created() {
            let vm = this
        },
      components:{
        pageHeader,
        PageFooter,
      }
    }
</script>

<style>
</style>
